<%--
  Created by IntelliJ IDEA.
  User: 曹梦1
  Date: 2024/10/25
  Time: 11:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="/js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-divider content-position="left">
        <span style="color: #23262e">商品类型信息总览</span>
    </el-divider>
    <el-tabs type="border-card">
        <el-tab-pane>
            <span slot="label">键盘颜色</span>
            <%--搜索框--%>
            <el-form :inline="true" :model="searchKeyBoardId" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="searchKeyBoardId.keyboardcolorid" placeholder="请输入ID搜索" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="searchKeyBoardId.keyboardcolorname" placeholder="请输入键盘颜色搜索" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button type="warning" @click="resetKeyBoard">刷新</el-button>
                </el-form-item>
            </el-form>
            <%--添加--%>
            <el-button type="primary" @click="addKeyBoard">添加</el-button>

            <%-- 键盘颜色表格--%>
            <el-table
                    :data="keyboardsList"
                    style="width: 100%"
            >
                <el-table-column
                        prop="keyboardcolorid"
                        label="ID"
                >
                </el-table-column>
                <el-table-column
                        prop="keyboardcolorname"
                        label="键盘颜色"
                >
                </el-table-column>
                <el-table-column
                        label="操作"
                >
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="editKeyBoard(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="delkeyboards(scope.row.keyboardcolorid)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <%--添加--%>
            <el-dialog title="添加键盘颜色" :visible.sync="dialogFormVisible" width="30%">
                <el-form :model="keyboards" label-width="80px" :rules="Rules" ref="addkeycoardsRules">
                    <el-form-item label="键盘颜色" prop="keyboardcolorname">
                        <el-input v-model="keyboards.keyboardcolorname"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="addKeyBoards">确定</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
            <%--编辑--%>
            <el-dialog title="编辑键盘颜色" :visible.sync="dialogFormVisibleEdit" width="30%">
                <el-form :model="editkeyboardsForm" label-width="80px"
                         :rules="Rules" ref="editkeycoardsRules">
                    <el-form-item label="键盘颜色" prop="keyboardcolorname">
                        <el-input v-model="editkeyboardsForm.keyboardcolorname"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="dialogFormVisibleEdit = false">取消</el-button>
                        <el-button type="primary" @click="editKeyBoards">确定</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
            <%--分页 --%>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[4, 6, 8, 12]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-tab-pane>

        <el-tab-pane label="轴体类型">
            <%--搜索框--%>
            <el-form :inline="true" :model="searchShaftChoose" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="searchShaftChoose.shaftchooseid" placeholder="请输入ID搜索" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="searchShaftChoose.shaftchoosename" placeholder="请输入轴体类型搜索" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onShaftchoose">查询</el-button>
                    <el-button type="warning" @click="resetShaftchoose">刷新</el-button>
                </el-form-item>
            </el-form>
            <%--添加按钮--%>
            <el-button type="primary" @click="addShaftchoose">添加</el-button>
            <%-- 键盘颜色表格--%>
            <el-table
                    :data="shaftchooseList"
                    style="width: 100%"
            >
                <el-table-column
                        prop="shaftchooseid"
                        label="ID"
                >
                </el-table-column>
                <el-table-column
                        prop="shaftchoosename"
                        label="轴体选择"
                >
                </el-table-column>
                <el-table-column
                        label="操作"
                >
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="editshaftchoose(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="delshaftchoose(scope.row.shaftchooseid)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <%--分页 --%>
            <el-pagination
                    @size-change="handleSizeChange2"
                    @current-change="handleCurrentChange2"
                    :current-page="currentPage2"
                    :page-sizes="[4, 6, 8, 12]"
                    :page-size="pageSize2"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total2">
            </el-pagination>
            <%--添加--%>
            <el-dialog title="添加轴体类型" :visible.sync="addshaftchoose" width="30%">
                <el-form :model="shaftchooseForm" label-width="80px" :rules="ShaftChooseRules" ref="addkeycoardsRules">
                    <el-form-item label="轴体类型" prop="shaftchoosename">
                        <el-input v-model="shaftchooseForm.shaftchoosename"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="addshaftchoose = false">取消</el-button>
                        <el-button type="primary" @click="addShaftchooseName">确定</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
            <%--编辑--%>
            <el-dialog title="编辑轴体类型" :visible.sync="editShaftChoose" width="30%">
                <el-form :model="editShaftChooseForm" label-width="80px"
                         :rules="ShaftChooseRules" ref="editShaftChooseRules">
                    <el-form-item label="键盘颜色" prop="shaftchoosename">
                        <el-input v-model="editShaftChooseForm.shaftchoosename"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="editShaftChoose = false">取消</el-button>
                        <el-button type="primary" @click="editShaftChooseName">确定</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </el-tab-pane>


        <el-tab-pane label="背光颜色">
            <%--搜索框--%>
            <el-form :inline="true" :model="searchbacklightcolor" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="searchbacklightcolor.backlightcolorid" placeholder="请输入ID搜索" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="searchbacklightcolor.backlightcolorname" placeholder="请输入背光颜色搜索" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onbacklightcolor">查询</el-button>
                    <el-button type="warning" @click="resetbacklightcolor">刷新</el-button>
                </el-form-item>
            </el-form>
            <%--添加按钮--%>
            <el-button type="primary" @click="addbacklight">添加</el-button>
            <%-- 键盘颜色表格--%>
            <el-table
                    :data="backlightcolorList"
                    style="width: 100%"
            >
                <el-table-column
                        prop="backlightcolorid"
                        label="ID"
                >
                </el-table-column>
                <el-table-column
                        prop="backlightcolorname"
                        label="背光颜色"
                >
                </el-table-column>
                <el-table-column
                        label="操作"
                >
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="editbacklightcolor(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="delbacklightcolor(scope.row.backlightcolorid)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <%--分页 --%>
            <el-pagination
                    @size-change="handleSizeChange3"
                    @current-change="handleCurrentChange3"
                    :current-page="currentPage3"
                    :page-sizes="[4, 6, 8, 12]"
                    :page-size="pageSize3"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total3">
            </el-pagination>
            <%--添加--%>
            <el-dialog title="添加背光颜色" :visible.sync="addlightcolors" width="30%">
                <el-form :model="lightcolorForm" label-width="80px" :rules="lightcolorRules" ref="addlightcolorsRules">
                    <el-form-item label="背光颜色" prop="backlightcolorname">
                        <el-input v-model="lightcolorForm.backlightcolorname"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="addlightcolors = false">取消</el-button>
                        <el-button type="primary" @click="addBacklightcolorName">确定</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
            <%--编辑--%>
            <el-dialog title="编辑背光颜色" :visible.sync="editlightcolors" width="30%">
                <el-form :model="editlightcolorForm" label-width="80px"
                         :rules="lightcolorRules" ref="editlightcolorsRules">
                </el-form>
                <el-form :model="editlightcolorForm" label-width="80px"
                         :rules="lightcolorRules" ref="editlightcolorsRules">
                    <el-form-item label="背光颜色" prop="backlightcolorname">
                        <el-input v-model="editlightcolorForm.backlightcolorname"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="editlightcolor = false">取消</el-button>
                        <el-button type="primary" @click="editBacklightcolorName">确定</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </el-tab-pane>
    </el-tabs>

</div>
</body>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            // 键盘颜色搜索条件
            searchKeyBoardId: {},//键盘颜色搜索条件
            keyboardsList: [],//键盘颜色列表
            currentPage: 1,//当前页
            pageSize: 4,//每页显示条数
            total: 0,//总条数
            dialogFormVisible: false,//添加键盘颜色对话框
            keyboards: {},//键盘颜色对象
            Rules: {
                keyboardcolorname: [
                    {required: true, message: '请输入键盘颜色', trigger: 'blur'}
                ],
            },
            dialogFormVisibleEdit: false,//编辑键盘颜色对话框
            editkeyboardsForm: {},//键盘颜色对象

            // 轴体类型搜索条件
            searchShaftChoose: {},//搜索轴体类型对象
            shaftchooseList: [],//轴体类型列表
            Rules: {
                shaftchoosename: [
                    {required: true, message: '请输入轴体类型', trigger: 'blur'}
                ]
            },
            addshaftchoose: false,//显示添加键盘颜色对话框
            shaftchooseForm: {},//添加轴体类型对象
            editShaftChoose: false,//显示编辑轴体类型对话框
            editShaftChooseForm: {},//编辑轴体类型对象
            ShaftChooseRules: {
                shaftchoosename: [
                    {required: true, message: '请输入轴体类型', trigger: 'blur'}
                ]
            },
            currentPage2: 1,//当前页
            pageSize2: 4,//每页显示条数
            total2: 0,//总条数


            // 背光颜色搜索条件
            searchbacklightcolor: {},//搜索背光颜色对象
            backlightcolorList: [],//背光颜色列表
            addlightcolors: false,//显示添加背光颜色对话框
            lightcolorForm: {},//添加背光颜色对象
            lightcolorRules: {
                backlightcolorname: [
                    {required: true, message: '请输入背光颜色', trigger: 'blur'}
                ]
            },
            editlightcolors: false,//显示编辑背光颜色对话框
            editlightcolorForm: {},//编辑背光颜色对象
            currentPage3: 1,//当前页
            pageSize3: 4,//每页显示条数
            total3: 0,//总条数

        },
        created() {
            this.loadkeycolor();//加载键盘颜色列表
            this.loadshaftchoose();//加载轴体类型列表
            this.loadbacklightcolor();//加载背光颜色列表
        },
        methods: {
            //点击删除
            delbacklightcolor(backlightcolorid) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete("/backlightcolor/deletebacklightcolor?backlightcolorid="+backlightcolorid).then(res => {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        })
                        this.loadbacklightcolor();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                });
            },
            //点击编辑
            editbacklightcolor(row) {
                this.editlightcolorForm = row;
                this.editlightcolors = true;
            },
            //提交编辑
            editBacklightcolorName() {
                this.$refs.editlightcolorsRules.validate((valid) => {
                    if (valid) {
                        axios.post("/backlightcolor/editbacklightcolor", this.editlightcolorForm).then(res => {
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            })
                            this.editlightcolors = false;
                            this.loadbacklightcolor();
                        })
                    }else {
                        return false;
                    }
                })
            },

            //点击添加键
            addbacklight() {
                this.addlightcolors = true;
            },
            //添加背光颜色
            addBacklightcolorName() {
                this.$refs.addlightcolorsRules.validate((valid) => {
                    if (valid) {
                        axios.post("/backlightcolor/addbacklightcolor", this.lightcolorForm).then(res => {
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            })
                            this.addlightcolors = false;
                            this.loadbacklightcolor();
                        })
                    }else {
                        return false;
                    }
                })
            },

            //加载背光颜色列表
            loadbacklightcolor() {
                axios.post("/backlightcolor/backlightcolorlist?pageNum=" + this.currentPage3 + "&pageSize=" + this.pageSize3, this.searchbacklightcolor).then(res => {
                    this.backlightcolorList = res.data.data.list;
                    this.total3 = res.data.data.total;
                })
            },
            //分页
            // 每页数据条数改变
            handleSizeChange3(val) {
                this.pageSize3 = val;
                this.loadbacklightcolor();
            },
            // 页码改变
            handleCurrentChange3(val) {
                this.currentPage3 = val;
                this.loadbacklightcolor();
            },
            //点击查询
            onbacklightcolor() {
                this.loadbacklightcolor();
            },
            //重置
            resetbacklightcolor() {
                this.searchbacklightcolor = {};
                this.loadbacklightcolor();
            },


//轴体类型
            //删除
            delshaftchoose(shaftchooseid) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete("/shaftchoose/deleteshaftchoose?shaftchooseid=" + shaftchooseid).then(res => {
                        if (res.data.code == 200) {
                            this.$message({
                                type: 'success',
                                message: res.data.msg
                            });
                            this.loadshaftchoose();
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.data.msg
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                });
            },
            //编辑
            editshaftchoose(row) {
                this.editShaftChooseForm = row;
                this.editShaftChoose = true;//显示编辑键盘颜色对话框
            },
            //确认编辑
            editShaftChooseName() {
                this.$refs.editShaftChooseRules.validate(valid => {
                    if (valid) {
                        axios.post("/shaftchoose/editShaftchooseAll", this.editShaftChooseForm).then(res => {
                            if (res.data.code == 200) {
                                this.$message({
                                    message: res.data.msg,
                                    type: 'success'
                                });
                                this.editShaftChoose = false;//关闭编辑键盘颜色对话框
                                this.loadshaftchoose();//重新加载轴体类型列表
                            }
                        })
                    } else {
                        return false;
                    }
                })

            },
            //点击添加显示弹框
            addShaftchoose() {
                this.addshaftchoose = true;//显示编辑键盘颜色
            },
            //确认添加
            addShaftchooseName() {
                this.$refs.addkeycoardsRules.validate(valid => {
                    if (valid) {
                        axios.post("/shaftchoose/addShaftchoose", this.shaftchooseForm).then(res => {
                            if (res.data.code == 200) {
                                this.$message({
                                    message: res.data.msg,
                                    type: 'success'
                                });
                                this.addshaftchoose = false;//关闭添加键盘颜色对话框
                                this.loadshaftchoose();//重新加载轴体类型列表
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        })
                    } else {
                        return false;
                    }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            //加载轴体类型列表
            loadshaftchoose() {
                axios.post("/shaftchoose/shaftchooselist?pageNum=" + this.currentPage2 + "&pageSize=" + this.pageSize2, this.searchShaftChoose).then(res => {
                    this.shaftchooseList = res.data.data.list;
                    this.total2 = res.data.data.total;
                })
            },
            //分页
            // 每页数据条数改变
            handleSizeChange2(val) {
                this.pageSize2 = val;
                this.loadshaftchoose();
            },
            // 页码改变
            handleCurrentChange2(val) {
                this.currentPage2 = val;
                this.loadshaftchoose();
            },
            //查询轴体类型
            onShaftchoose() {
                this.loadshaftchoose();
            },
            //重置
            resetShaftchoose() {
                this.searchShaftChoose = {};//清空搜索条件
                this.loadshaftchoose();//重新加载
            },

//键盘颜色
            //点击编辑显示弹框
            editKeyBoard(row) {
                this.dialogFormVisibleEdit = true;//显示添加键盘颜色
                this.editkeyboardsForm = row;//将当前行数据赋值给键盘颜色对象

            },
            //确认编辑
            editKeyBoards() {
                this.$refs.editkeycoardsRules.validate((valid) => {
                    if (valid) {
                        axios.put("/keyboardcolor/editkeyboardcolor", this.editkeyboardsForm).then(res => {
                            if (res.data.code == 200) {
                                this.$message({
                                    type: 'success',
                                    message: res.data.msg
                                });
                                this.dialogFormVisibleEdit = false;
                                this.loadkeycolor();
                            } else {
                                this.$message({
                                    type: 'error',
                                })
                            }
                        })
                    }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                });
            },

            //删除
            delkeyboards(keyboardcolorid) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete("/keyboardcolor/delkeyboardcolor?keyboardcolorid=" + keyboardcolorid).then(res => {
                        if (res.data.code == 200) {
                            this.$message({
                                type: 'success',
                                message: res.data.msg
                            });
                            this.loadkeycolor();
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.data.msg
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                });
            },

            // 添加
            addKeyBoard() {
                this.dialogFormVisible = true;//显示添加键盘颜色对话框
            },
            //确认添加
            addKeyBoards() {
                this.$refs.addkeycoardsRules.validate((valid) => {
                    if (valid) {
                        axios.post("/keyboardcolor/addkeyboardcolor", this.keyboards).then(res => {
                            if (res.data.code == 200) {
                                this.$message({
                                    type: 'success',
                                    message: '添加成功!'
                                });
                                this.dialogFormVisible = false;//关闭弹框
                                this.loadkeycolor();
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: '添加失败!'
                                });
                            }
                        })
                    } else {
                        return false;
                    }
                })

            },

            // 加载键盘颜色列表
            loadkeycolor() {
                axios.post("/keyboardcolor/keycolorlist?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize, this.searchKeyBoardId).then(res => {
                    this.keyboardsList = res.data.data.list;
                    this.total = res.data.data.total;
                })
            },
            //分页
            // 每页数据条数改变
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadkeycolor();

            },
            // 页码改变
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadkeycolor();

            },

            // 查询
            onSubmit() {
                this.loadkeycolor();//加载键盘颜色列表
            },
            // 刷新
            resetKeyBoard() {
                this.loadkeycolor();//加载键盘颜色列表
                this.searchKeyBoardId = {};//清空搜索条件

            },
            // 关闭弹框并且重置表单
            closeForm() {
                this.$refs.addFormRules.resetFields();//重置表单
            },
        }
    })
</script>
</html>
